<template>
   <el-card style="max-width: 80%; margin: 30px auto;">
      <div class="container">
         <div class="blue">
            <span>家庭医生后台管理系统</span>
            <img src="../../assets/teamManage/u1111.png">
         </div>
         <div class="right">
            <img src="../../assets/teamManage/u2130.jpg">
            <span>欢迎登录</span>
            <div class="column">
               <el-input placeholder="请输入手机号码" size="large" v-model="loginUserInfo.phone"></el-input>
               <el-input placeholder="请输入密码" size="large" v-model="loginUserInfo.password"></el-input>
            </div>

            <div class="custom-checkbox" @click="toggleAgree">
               <!-- 自定义选框 -->
               <div class="checkbox-box" :style="{ backgroundColor: isAgreed ? '#2984F8' : '#FFF' }">
                  <text v-if="isAgreed" class="icon-check">✓</text>
               </div>
               <text>我已阅读并同意</text>
               <text>《用户隐私政策》</text>
            </div>
            <el-button type="primary" @click="loginUser()">登录</el-button>
         </div>
      </div>
   </el-card>
</template>

<script setup>
import { ref } from 'vue';
import { loginDoctorApi } from '../../api/login';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';


const router = useRouter()

//储存用户的登录信息
const loginUserInfo = ref({
   phone: '13990086811',
   password: '123456'
})


const isAgreed = ref(false);

const toggleAgree = () => {
   isAgreed.value = !isAgreed.value;
};


//登录方法
function loginUser() {
   // 检查是否勾选协议
   if (!isAgreed.value) {
      ElMessage.warning('请先同意用户隐私政策');
      return;
   }
   loginDoctorApi({
      ...loginUserInfo.value
   }).then(res => {
      console.log(res);
      if (res.code == 200) {
         ElMessage({
            message: '登录成功',
            type: 'success'
         });
         router.replace('/home')
         localStorage.doctor_token = res.token
      }
   }).catch(res => {
      ElMessage({
         message: '登录失败',
         type: 'warning'
      })
   })
}


</script>

<style scoped lang="scss">
.el-card {
   --el-card-padding: 0;
   border-radius: 10px;
}


.container {
   display: flex;
}


.blue {
   background-color: #2984f8;
   width: 50%;
   height: 90vh;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;


   span {
      color: white;
      font-family: 'PingFangSC-Regular',
         'PingFang SC';
      position: absolute;
      left: 20px;
      top: 20px
   }

   img {
      margin: 0 auto;
   }
}


.right {
   width: 50%;
   height: 90vh;
   text-align: center;

   img {
      width: 50px;
      height: 50px;
      display: block;
      margin: 100px auto 25px;
   }

   span {
      display: block;
      font-weight: 900;
      font-size: 25px;
      margin-bottom: 20px;
   }

   .column {
      width: 300px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
   }

   .el-input {
      width: 300px;
      margin-bottom: 30px;
      --el-input-bg-color: #f2f7fb;
   }
}

.custom-checkbox {
   width: 300px;
   display: flex;
   align-items: center;
   font-size: 14px;
   margin: 0 auto;
   color: #ccc;

   .checkbox-box {
      width: 13px;
      height: 13px;
      border: 2px solid #ccc;
      border-radius: 6px;
      margin-right: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s;

      .icon-check {
         color: white;
         font-size: 10px;
      }
   }

   text:last-child {
      color: #1877f2;
   }
}

.el-button {
   width: 300px;
   margin-top: 30px;
}
</style>